<script>
export default {
    name:"Tab",
    props:{
        tabName:{
            type:String,
            default:"tab"
        },
        index:{
            type:[String,Number],
            default:"0"
        }
    },
    computed:{
        active(){
            return this.$parent.currentIndex == this.index;
        }
    },
    methods:{
        changeCurrentIndex(){
            this.$parent.onChangeIndex(this.index)
        }
    },
    mounted(){
        this.$parent.panes.push(this)
    },
    render(){
        let classname = {
            tab:true,
            active:this.active
        }
        return(
            <li class={classname} onClick={this.changeCurrentIndex.bind(this)}>
                {this.tabName}
            </li>
        )
    }
}
</script>
<style scoped>
.tab {
  list-style: none;
  line-height: 40px;
  margin-right: 30px;
  position: relative;
  flex: 1;
  text-align: center;
}

.tab.active {
  border-bottom: 2px solid blue;
}
</style>
